<template>
  <div class="left-nav">
    <div class="contentA" v-for="(item, index) in link" :key="index">
      <router-link
        @click.native="active(index)"
        :class="item.active ? 'active' : ''"
        :to="item.path"
        >{{ item.name }}</router-link
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      link: [
        { name: "默认底图", path: "/", active: 1 },
        { name: "基本地图", path: "/BaseMap", active: 0 },
        { name: "图层控件", path: "/LayerControlMap", active: 0 },
        { name: "重庆人口地图", path: "/CQSIMPopMap", active: 0 },
        { name: "原生控件设置", path: "/OriConMap", active: 0 },
        { name: "WMS服务", path: "/WmsLayerMap", active: 0 },
        { name: "添加图像", path: "/ImageMap", active: 0 },
        { name: "测试", path: "/TestPage", active: 0 },
        { name: "测试1", path: "/TestPage1", active: 0 },
        { name: "测试2", path: "/TestPage2", active: 0 },
        { name: "测试3", path: "/TestPage3", active: 0 },
        { name: "动态图标1", path: "/AniIcon", active: 0 },
        { name: "动态图标2", path: "/MovIcon", active: 0 },
        { name: "绘制矢量", path: "/DrawVec", active: 0 },
        { name: "轮播图", path: "/swiper", active: 0 },
        { name: "加载KML", path: "/LoadKml", active: 0 },
        { name: "动画", path: "/keyFrames", active: 0 },
        { name: "格网计算", path: "/gridCalculate", active: 0 },
        { name: "echart图表", path: "/EchartTable", active: 0 },
        { name: "算法题", path: "/calculateProblems", active: 0 },
        { name: "promise用法", path: "/PromiseUsing", active: 0 },
        { name: "extend用法", path: "/ExtendVue", active: 0 },
        { name: "音乐播放器(自定义)", path: "/MusicPlayer", active: 0 },
        { name: "音乐播放器", path: "/MusicPlayer2", active: 0 },
        { name: "markdown", path: "/markedUsing", active: 0 },
        { name: "ai界面", path: "/aiUi", active: 0 },
      ],
    };
  },
  mounted() {},
  methods: {
    active(index) {
      this.link.forEach((item) => {
        item.active = 0;
      });
      console.log(this.link[index]);
      this.link[index].active = 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.left-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  background-color: rgba(28, 22, 68, 0.2);
  z-index: 999;
  overflow: auto;

  .contentA {
    position: relative;
    height: 5%;
    border-bottom: 1px solid #e7e7e725;
  }

  a {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-55%, -50%);
    text-decoration: none; /* 去除默认的下划线 */
    outline: none; /* 去除旧版浏览器的点击后的外虚线框 */
    color: #fff; /* 去除默认的颜色和点击后变化的颜色 */
  }
  .active {
    color: #f3b448;
  }
}
</style>